<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title>主界面</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
<div id="app">
    <div>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="img"
                    label="图片展示"
                    border=true
                    align=center
                    header-align=center
            >
                <template slot-scope="scope">
                    <img :src="scope.row.img" alt="" width="50px" height="50px" >
                </template>

            </el-table-column>
            <el-table-column
                    prop="describes"
                    label="描述"
                    border=true
                    align=center
                    header-align=center
            >
            </el-table-column>
            <el-table-column
                    prop="url"
                    label="当前状态"
                    border=true
                    align=center
                    header-align=center
            >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.statuss===0">已启用</el-tag>
                    <el-tag v-if="scope.row.statuss===1">已停用</el-tag>
                </template>
            </el-table-column>            <el-table-column
                    prop="url"
                    label="操作"
                    border=true
                    align=center
                    header-align=center
            >
                <template slot-scope="scope">
                    <el-button type="success" v-if="scope.row.statuss===1" @click="updatemodules(scope.row.id,scope.row.statuss)">启用</el-button>
                    <el-button type="info" v-if="scope.row.statuss===0" @click="updatemodules(scope.row.id,scope.row.statuss)">停用</el-button>
                    <el-button type="danger" @click="delmodules(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    </div>
</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            tableData: []
        },
        created(){
            this.initLeftMenu();
        },
        methods:{
            initLeftMenu(){
                axios.post("/root/modules").then(resp=>{
                    this.tableData=resp.data.data;
                })
            },
            delmodules(id){
                axios.post("/root/delmodules?id="+id).then(resp=>{
                    if (resp.data.code===2000){
                        this.$message({message: resp.data.msg, type: 'success'});
                        this.initLeftMenu();
                    }else {
                        this.$message.error(resp.data.msg);
                    }

                })
            },
            updatemodules(id,status){
                axios.post(`/root/updatemodules/${id}/${status}`).then(resp=>{
                    if (resp.data.code===2000){
                        this.$message({message: resp.data.msg, type: 'success'});
                        this.initLeftMenu();
                    }else {
                        this.$message.error(resp.data.msg);
                    }
                })
            }
        }


    })
</script>
</html>